<template>
    <div class="message" :style="propStyle" id="scrollId">
        <!--  @vuescroll:scroll="handleScroll" -->
        <vue-scroll ref="scrollRef" class="msg-scroll" :ops="scrollOptions">
            <div class="msg flex flex-column" id="msg-area">
                <el-button v-if="msgPage > 1" size="mini" @click="handleLoadMore" icon="el-icon-refresh" type="text"
                           :loading="isLoading">加载更多...
                </el-button>
                <!-- trigger="click|hover" v-model="visible" offset="0" style="margin-top: 5px;" -->
                <!-- icon="el-icon-delete" icon="el-icon-edit" -->
                <div slot="reference" v-show="!item.is_digit_man" :class="['msg-item', `msg-length-${index}`, {'msg-item-show':!item.is_digit_man, 'msg-item-hide':item.is_digit_man}]"
                     :data-id="item.id" v-for="(item, index) in messageList" :key="index">
                    <span v-if="item.icon_text && item.icon_text === '助教'" class="msg_icon_key">{{
                            item.icon_text
                        }}</span>
                    <span v-else-if="item.icon_text && item.icon_text === '数字人'"
                          class="msg_icon_num">{{ item.icon_text }}</span>
                    <span v-else-if="item.icon_text && item.icon_text === '评论组'"
                          class="msg_icon_digit_man">{{ item.icon_text }}</span>
                    <span v-else-if="item.icon_text" class="msg_icon">{{ item.icon_text }}</span>
                    <i v-if="item.is_hide" class="el-icon-error"></i>
                    <!--<i v-else class="el-icon-view"></i>-->
                    <i v-if="item.is_silence" class="el-icon-turn-off-microphone"></i>
                    <i v-else class="el-icon-microphone"></i>
                    <i v-if="item.is_illegal" class="el-icon-warning"></i>
                    <span class="username" :data-is_hide="item.is_hide" :data-is_silence="item.is_silence"
                          :data-id="item.id">{{ item.nickname }}：</span>
                    {{ item.msg }} <br>
                    <div class="msg_button" v-if="item.icon_text === '铁粉'">
                        <pers-button type="success" size="mini" @click="sendHe(item)" perms="screen:control:send_he"
                                     label="@他"></pers-button>
                        <pers-button v-if="item.id && !item.is_silence" type="danger" size="mini" @click="silence(item)"
                                     perms="screen:control:silence" label="自嗨"></pers-button>
                        <pers-button v-if="item.id && item.is_silence" type="danger" size="mini"
                                     @click="endSilence(item)" perms="screen:control:end_silence"
                                     label="解除自嗨"></pers-button>
                        <pers-button v-if="item.no && !item.is_hide" type="primary" size="mini" @click="hideMsg(item)"
                                     perms="screen:control:hide" label="隐藏"></pers-button>
                        <pers-button v-if="item.no && item.is_hide" type="primary" size="mini" @click="showMsg(item)"
                                     perms="screen:control:end_hide" label="显示"></pers-button>
                    </div>
                    <div class="msg_button" v-else>
                        <pers-button v-if="item.no && !item.is_hide" type="primary" size="mini" @click="hideMsg(item)"
                                     perms="screen:control:hide" label="隐藏"></pers-button>
                        <pers-button v-if="item.no && item.is_hide" type="primary" size="mini" @click="showMsg(item)"
                                     perms="screen:control:end_hide" label="显示"></pers-button>
                    </div>
                </div>


            </div>
        </vue-scroll>
        <!--<el-button size="mini" @click="autoScroll" icon="el-icon-refresh" type="text" :loading="isLoading">自动滚屏</el-button>-->
    </div>
</template>

<script>
import PersButton from "@/components/PersButton.vue";

export default {
    name: 'LiveSilenceMsg',
    components: {PersButton},
    props: {
        isLoading: {
            type: Boolean,
            default: false
        },
        nickname: {
            type: String,
            default: '默认用户'
        },
        messageList: {
            type: Array,
            default: () => []
        },
        isScroll: {
            type: Boolean,
            default: false
        },
        isSilenceButton: {
            type: Boolean,
            default: false
        },
        isHideButton: {
            type: Boolean,
            default: false
        },
        propStyle: {
            type: String,
            default: ''
        },
        msgPage: {
            type: Number,
            default: 1
        }
    },
    data() {
        return {
            msgMask: true,
            scrollTop: 0,
            cumulative: 500,
            cumulativeStart: 0,
            scrollOptions: {
                scrollY: true,
                bar: {
                    backgroundColor: '#f5f5f5', // 滚动条背景色
                    opacity: 0.6, // 滚动条透明度
                },
                scrollPanel: {
                    initialScrollY: true,
                    verticalNativeBarPos: 'right'
                },
                // scrollButton: {
                //   enable: true,
                // },
                // bouncing: {
                //   top: 100
                // },
                // snapping: true,  // 启用将内容对齐到配置的像素网格
            }
        }
    },
    created() {
    },
    mounted() {
    },
    updated() {
        this.toLower();
    },
    beforeDestroy() {
    },
    methods: {
        autoScroll() {
            const msgLength = this.$refs.scrollRef.$el.querySelectorAll('.msg-item-show')[this.$refs.scrollRef.$el.querySelectorAll('.msg-item-show').length - 1]
            // const msgLength = this.$refs.scrollRef.$el.querySelector('.msg-length-' + (this.messageList.length - 1) + ' .msg-item-show');
            this.$refs.scrollRef.scrollIntoView(msgLength, 50);
        },
        getScroll() {
            return this.$refs.scrollRef.$el.querySelector('.__panel');
        },
        getItems() {
            return this.$refs.scrollRef.$el.querySelector('.__view');
        },
        toLower() {
            if (this.isScroll) {
                // console.log('[control] 滚到底');
                const msgLength = this.$refs.scrollRef.$el.querySelectorAll('.msg-item-show')[this.$refs.scrollRef.$el.querySelectorAll('.msg-item-show').length - 1]
                // const msgLength = this.$refs.scrollRef.$el.querySelector('.msg-length-' + (this.messageList.length - 1) + ' .msg-item-show');
                this.$refs.scrollRef.scrollIntoView(msgLength, 50);
            }
        },
        // 处理滚动事件
        handleScroll() {
            // 判断是否滚动到了底部  
            if (event.y + event.height >= event.maxY - 20) {
                // 调用加载更多数据的函数
                console.log('[control] 滚到底');
                this.loadMore();
            }
        },
        handleLoadMore() {
            if (this.isLoading) return;
            this.isLoading = true;
            this.loadMore();

        },
        // 加载更多数据的函数  
        loadMore() {
            // 模拟异步获取数据
            setTimeout(() => {
                this.$emit('loadMore');

                // 假设这是从服务器获取的新数据
                // const newData = this.$emit('loadMore');

                // this.messageList.unshift(newData);

                // 合并数据
                // this.messageList = [...this.items, ...newData];
                // this.$emit('sendHe', this.messageList);

                // 停止加载状态
                this.isLoading = false;
            }, 1000);

        },
        /* ----------------------------------------------------------------------------------------------- */
        sendHe(item) {
            // this.visible = false;
            this.$emit('sendHe', item);
        },
        sendMsg(message, nickname, userId, userAvatar, text, json) {
            if (this.messageList.length > 200) {
                this.messageList.splice(0, 1);
                // let length = this.$el.querySelectorAll('#msg-area .msg-item').length;
                // console.log('length-msg', length);
                // this.$el.querySelector('#msg-area .msg-item').remove();
            }
            let isIllegal = 0;  // 违禁词
            let isSilence = 0;  // 禁言
            let isDigitMan = 0;
            if (json.msg) {
                isIllegal = 1;
            }
            if (json.type === 6) {
                // 禁言消息
                isSilence = 1;
            } else if (json.type === 7) {
                // 违禁词消息
                isIllegal = 1;
            }
            if (json.is_digit_man) {
                // 隐藏数字人/评论组
                isDigitMan = 1;
            }
            this.messageList.push({
                id: userId,
                msg: message,
                nickname: nickname,
                avatar: userAvatar,
                no: json.no,
                type: json.type,
                icon_text: text,
                is_illegal: isIllegal,
                is_silence: isSilence,
                is_digit_man: isDigitMan,
                is_hide: 0
            });

        },
        //滚动到底部
        scrollToLower() {
            setTimeout(() => {
                this.$nextTick(() => {
                    const scrollWrapper = this.$refs.scrollRef.$el.querySelector('.vs__content-wrapper');
                    console.log(scrollWrapper.scrollTop, scrollWrapper.scrollHeight);
                    scrollWrapper.scrollTop = scrollWrapper.scrollHeight;
                });
            }, 500);
        },
        //禁言
        silence(row) {
            console.log('禁言-LiveMsg', row)
            this.$confirm(`是否禁言用户【${row.nickname}】？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$emit('silence', row);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            })
        },
        endSilence(row) {
            console.log('解除禁言-LiveMsg', row)
            this.$confirm(`是否解除用户【${row.nickname}】的禁言？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$emit('endSilence', row);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            })
        },
        //隐藏消息
        hideMsg(row) {
            console.log('隐藏消息-LiveMsg', row)
            this.$emit('hideMsg', row);
            // this.$confirm(`是否隐藏用户【${row.nickname}】的这条消息？`, '提示', {
            //   confirmButtonText: '确定',
            //   cancelButtonText: '取消',
            //   type: 'warning'
            // }).then(() => {
            //   this.$emit('hideMsg', row);
            // }).catch(() => {
            //   this.$message({
            //     type: 'info',
            //     message: '已取消'
            //   });
            // })
        },
        showMsg(row) {
            console.log('显示消息-LiveMsg', row)
            this.$emit('showMsg', row);
            // this.$confirm(`是否显示用户【${row.nickname}】的这条消息？`, '提示', {
            //   confirmButtonText: '确定',
            //   cancelButtonText: '取消',
            //   type: 'warning'
            // }).then(() => {
            //   this.$emit('showMsg', row);
            // }).catch(() => {
            //   this.$message({
            //     type: 'info',
            //     message: '已取消'
            //   });
            // })
        },
    }
}
</script>

<style lang="scss" scoped>
.el-popper {
    margin-top: 5px;
    text-align: center;
}

.message {
    width: 100%;
    height: 467px; /* 设置容器高度以触发滚动 */
    overflow: hidden; /* 隐藏默认滚动条 */
    text-align: left;

    .msg-scroll {
        /* height: 400px; */

        &.mask {
            -webkit-mask: -webkit-gradient(linear, left 30%, left top, from(#000), to(transparent));
        }

        .msg-item {
            background: var(--live-background);
            width: 100%;
            color: #ccc;
            font-size: 14px;
            padding: 5px 10px;
            border-radius: 20px;
            overflow-wrap: anywhere;
            white-space: pre-wrap;
            align-self: flex-start;
            transition: opacity 0.3s ease;

            image {
                height: 36px;
                margin-right: 5px;
                vertical-align: middle;
            }

            .username {
                font-weight: 500;
                color: #77c4bc;
            }

            .msg_button {
                text-align: right;

                button {
                    padding: 3px 10px;
                    font-size: 10px;
                }
            }

            .msg_icon {
                border-radius: 30px;
                border: 1px solid #af4545;
                background-color: rgba(175, 69, 69, 1);
                padding: 0 7px;
                color: white;
                margin-right: 2px;
                font-size: 11px;
            }

            .msg_icon_digit_man {
                border-radius: 30px;
                border: 1px solid #2e8a00;
                background-color: #2e8a00;
                padding: 0 7px;
                color: white;
                margin-right: 2px;
                font-size: 11px;
            }

            .msg_icon_num {
                border-radius: 30px;
                border: 1px solid #4579af;
                background-color: #4579af;
                padding: 0 7px;
                color: white;
                margin-right: 2px;
                font-size: 11px;
            }

            .msg_icon_key {
                border-radius: 30px;
                border: 1px solid #c8b43c;
                background-color: rgba(200, 180, 60, 1);
                padding: 0 7px;
                color: white;
                margin-right: 2px;
                font-size: 11px;
            }

            &.system {
                color: #77c4bc;
            }
        }

    }
}

.input-with-select .el-input-group__prepend {
    background-color: #fff;
}
</style>